import React from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getRealSize, Touchable} from '../../utils';
import ConfirmDialog, {DialogMode} from '../../components/confirm-dialog';
import ThemeStyles from '../../styles';
import {SwipeListView} from 'react-native-swipe-list-view';
import InputDialog from '../../components/input-dialog';
import * as profileActionCreator from '../../actions/profile-actions';
import {I18n} from '../../reducers/intl';
import associateAccount from '../../reducers/associate-account';
import {searchAccount} from '../../actions/profile-actions';

class AssociateScreen extends React.PureComponent {
  static navigationOptions = ({navigation}) => ({
    title: I18n.t('page.title.associate'),
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    headerRight: () => (
      <Touchable onPress={navigation.getParam('onAdd')}>
        <View
          style={[ThemeStyles.Layout.base.padding, {height: getRealSize(48)}]}>
          <Text
            style={[
              ThemeStyles.Front.base,
              ThemeStyles.Color.primary,
              {width: 48, height: 48},
            ]}>
            {I18n.t('button.add')}
          </Text>
        </View>
      </Touchable>
    ),
  });

  state = {
    dialogVisible: false,
    addDialogVisible: false,
    itemId: 0,
  };

  componentDidMount() {
    const {navigation} = this.props;
    navigation.setParams({onAdd: () => this.onAdd()});
  }

  onAdd = () => {
    this.setState({addDialogVisible: true});
  };

  onConfirmRemove = id => {
    this.setState({dialogVisible: true, itemId: id});
  };

  onRemove = () => {
    const {profileActions, user} = this.props;
    profileActions.removeAssociate(this.state.itemId, user.type);
  };

  onSubmit = value => {
    const {profileActions, user} = this.props;
    profileActions.searchAccount(value, user.type);
    this.setState({addDialogVisible: false});
  };

  render() {
    const {user} = this.props;
    const data = [];
    if (!user.owner_info) {
    } else if (Array.isArray(user.owner_info)) {
      data.push(...user.owner_info);
    } else {
      data.push(user.owner_info);
    }
    return (
      <View style={Styles.container}>
        <Text style={Styles.note}>{I18n.t('note.sideslip')}</Text>
        <SwipeListView
          data={data}
          ItemSeparatorComponent={() => (
            <View style={{height: getRealSize(15)}} />
          )}
          renderItem={data => <AccountCard {...data.item} />}
          renderHiddenItem={data => (
            <ActionBlock
              {...data.item}
              label={I18n.t('button.delete')}
              onPress={() => this.onConfirmRemove(data.item.id)}
            />
          )}
          disableRightSwipe
          useNativeDriver={false}
          rightOpenValue={-75}
        />
        <ConfirmDialog
          content={I18n.t('dialog.content.confirmDelAssociate')}
          visible={this.state.dialogVisible}
          mode={DialogMode.confirm}
          okLabel={I18n.t('button.confirm')}
          cancelLabel={I18n.t('button.close')}
          onConfirm={() => this.onRemove()}
          onClose={() => this.setState({dialogVisible: false})}
        />
        <InputDialog
          title={I18n.t('dialog.title.associate')}
          placeholder={I18n.t('form.placeholder.associate')}
          okLabel={I18n.t('button.confirm')}
          cancelLabel={I18n.t('button.close')}
          onSubmit={value => this.onSubmit(value)}
          visible={this.state.addDialogVisible}
          onClose={() => this.setState({addDialogVisible: false})}
          field=""
        />
      </View>
    );
  }
}

const ActionBlock = props => {
  return (
    <View style={Styles.rowBack}>
      <Touchable onPress={() => props.onPress(props.id)}>
        <View style={Styles.delBtn}>
          <Text style={Styles.delLabel}>{props.label}</Text>
        </View>
      </Touchable>
    </View>
  );
};

const AccountCard = props => {
  return (
    <View style={Styles.itemContainer}>
      <View style={Styles.itemContent}>
        <Text style={Styles.itemTitle}>{props.email}</Text>
        <Text style={Styles.itemDesc}>
          {props.clinic_name || props.vendor_name}
        </Text>
      </View>
    </View>
  );
};

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  profile: state.profile,
  associateAccount: state.associateAccount,
});

const mapDispatchToProps = dispatch => ({
  profileActions: bindActionCreators(profileActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(AssociateScreen);

const Styles = StyleSheet.create({
  container: {
    ...ThemeStyles.Color.background.white,
  },
  note: {
    // textAlign: 'right',
    marginHorizontal: getRealSize(15),
    paddingVertical: getRealSize(2),
    fontSize: getRealSize(12),
    color: ThemeStyles.Color.text.gray.color,
  },
  itemContainer: {
    flex: 1,
    height: getRealSize(96),
    backgroundColor: '#F7F7F7',
    borderRadius: getRealSize(8),
    padding: getRealSize(20),
    marginHorizontal: getRealSize(15),
    flexDirection: 'row',
    alignItems: 'center',
  },
  rowBack: {
    flex: 1,
    marginHorizontal: getRealSize(15),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  delBtn: {
    height: getRealSize(96),
    width: getRealSize(68),
    backgroundColor: 'red',
    borderRadius: getRealSize(8),
    justifyContent: 'center',
    alignItems: 'center',
  },
  delLabel: {
    color: 'white',
  },
  itemImg: {},
  itemAvatar: {
    height: getRealSize(58),
    width: getRealSize(58),
  },
  itemContent: {
    marginLeft: getRealSize(8),
    flex: 1,
  },
  itemTitle: {
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    flex: 1,
    color: '#333',
  },
  itemDesc: {
    fontSize: getRealSize(12),
    flex: 1,
    color: '#333',
  },
});
